<!--
 * @Descripttion: 
 * @version: @ 1.0.0
 * @Author: 朱江洲
 * @Date: 2021-11-25 09:42:40
 * @LastEditors: 朱江洲
 * @LastEditTime: 2022-05-06 17:43:23
-->
<template>
  <div class="app-container">
    <div class="header">
      <div class="back" @click="goBack">
        <i class="iconfont icon-fanhui1"></i>
        返回订单列表
      </div>
      <div class="orderDetails">订单详情</div>
    </div>
    <div>
      <div class="basics">订单信息</div>
      <el-form :model="orderForm" label-width="100px">
        <el-form-item label="订单编号："
          >{{ orderForm.orderNumber }}
        </el-form-item>
        <el-form-item label="考试名称：">
          {{ orderForm.examName }}
        </el-form-item>
        <el-form-item label="订单金额：">
          <span
            style="
              font-size: 14px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #ff0000;
            "
            >{{ orderForm.total }}</span
          >
        </el-form-item>
        <el-form-item label="支付时间：">
          {{ orderForm.paymentTime }}
        </el-form-item>
        <el-form-item label="支付方式：">
          {{ orderForm.paymentType | payType }}
        </el-form-item>
      </el-form>
      <div class="basics">订单信息</div>
      <el-table :data="orderData">
        <el-table-column label="姓名" prop="personName"> </el-table-column>
        <el-table-column label="缴费金额" prop="price"> </el-table-column>
        <el-table-column label="考试名称" prop="examinationName">
        </el-table-column>
        <el-table-column label="批次名称" prop="batchName"> </el-table-column>
        <el-table-column label="手机号码" prop="phone"> </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <span @click="replaceCus(scope.row)" class="modify">替换</span>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        prev-text="上一页"
        next-text="下一页"
        background
        :page-size="pageSize"
        :page-sizes="[10, 20, 30, 40, 50, 100]"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        layout=" ->,total,sizes, prev, pager, next, jumper "
        :total="total"
      >
      </el-pagination>
    </div>
    <el-dialog title="选择学员" :visible.sync="modityShow" width="60%">
      <div class="chioose-header">
        <div>
          <el-button type="primary" size="default" @click="newStudent">
            新增学员
          </el-button>
        </div>
        <div class="header-right">
          <el-input v-model="input" placeholder="请输入姓名/手机号"></el-input>
          <el-button type="primary" size="default" @click="search">
            搜索
          </el-button>
        </div>
      </div>
      <el-table :data="chiooseData">
        <el-table-column label="姓名" prop="name"> </el-table-column>
        <el-table-column
          label="手机号码"
          prop="phoneNumber"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column label="性别" prop="sex"> </el-table-column>
        <el-table-column
          label="公司名称"
          prop="companyName"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column label="部门" prop="deptName"> </el-table-column>
        <el-table-column
          label="身份证号"
          prop="idNumber"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          label="生日"
          prop="birthday"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column label="文化程度" prop="education"> </el-table-column>
        <el-table-column label="工作状态" prop="jobState"> </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <span class="modify" @click="onModity(scope.row)">替换</span>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        prev-text="上一页"
        next-text="下一页"
        background
        :page-size="pageSize"
        :page-sizes="[10, 20, 30, 40, 50, 100]"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        layout=" ->,total, sizes,prev, pager, next, jumper "
        :total="retlceTotal"
      >
      </el-pagination>
      <span slot="footer">
        <el-button @click="modityShow = false">取消</el-button>
      </span>
    </el-dialog>
    <detail-sign
      :dialogObj="dialogObj"
      :signUp="signUp"
      v-if="dialogObj.detailEject"
    ></detail-sign>
    <new-student :dialog="dialog" v-if="dialog.studentShowEject"></new-student>
  </div>
</template>

<script>
import {
  info,
  getRegisterInformations,
  replaceList,
  check,
} from "@/api/enterprise/refund";
import detailSign from "./detailSign.vue";
import NewStudent from "../traineeInfo/newStudent.vue";
export default {
  components: { detailSign, NewStudent },
  data() {
    return {
      input: "",
      pageNum: 1,
      pageSize: 10,
      total: 0,
      retlceTotal: 0,
      orderForm: {},
      chiooseData: [],
      orderData: [],
      modityShow: false,
      id: "",
      signUp: [],
      dialog: { studentShow: false, studentShowEject: false },
      dialogObj: {
        detailShow: false,
        detailEject: false,
      },
    };
  },
  filters: {
    payType: function (val) {
      if (val == 1) {
        val = "微信";
      } else if (val == 2) {
        val = "支付宝";
      } else {
        val = "线下支付";
      }
      return val;
    },
  },
  created() {
    var str = window.location.href;
    this.id = str.split("=")[1];
    this.getInfo();
  },
  watch: {
    input(newValue, oldValue) {
      if (newValue == "") {
        this.getList();
      }
    },
  },
  methods: {
    // 新增学员
    newStudent() {
      this.dialog.studentShowEject = true;
      this.$nextTick(function () {
        this.dialog.studentShow = true;
      });
    },
    // 获取替换人员列表
    getList() {
      replaceList({
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        identification: this.input,
      }).then((res) => {
        res.rows.map((item) => {
          if (item.sex == 1) {
            item.sex = "女";
          } else if (item.sex == 2) {
            item.sex = "未知";
          } else if (item.sex == 0) {
            item.sex = "男";
          }
          if (item.jobState == 1) {
            item.jobState = "在职";
          } else if (item.jobState == 2) {
            item.jobState = "离职";
          }
          if (item.education == 1) {
            item.education = "小学";
          } else if (item.education == 2) {
            item.education = "初中";
          } else if (item.education == 3) {
            item.education = "高中/中专";
          } else if (item.education == 4) {
            item.education = "专科";
          } else if (item.education == 5) {
            item.education = "大学";
          } else if (item.education == 6) {
            item.education = "研究生";
          }
        });
        this.chiooseData = res.rows;
        this.retlceTotal = res.total;
      });
    },
    // 获取订单详情人员列表
    getOrderInfo(orderNumber) {
      getRegisterInformations({
        orderNumber: orderNumber,
        pageSize: this.pageSize,
        pageNum: this.pageNum,
      }).then((res) => {
        this.orderData = res.rows;
        this.total = res.total;
      });
    },
    // 获取订单详情
    getInfo() {
      info({
        id: this.id,
      }).then((res) => {
        this.orderForm = res.data;
        this.getOrderInfo(res.data.orderNumber);
      });
    },
    //   打开替换
    onModity(row) {
      let exmInfo = JSON.parse(sessionStorage.getItem("ExaInfo"));
      let fd = new FormData();
      fd.append("examType", exmInfo.examId);
      fd.append("ids", row.id);
      fd.append("batchId", exmInfo.batchId);
      check(fd).then((res) => {
        this.dialogObj.detailEject = true;
        this.$nextTick(function () {
          this.dialogObj.detailShow = true;
          this.signUp.push(row);
        });
      });
    },
    //   搜索
    search() {
      this.getList();
    },
    // 替换
    replaceCus(row) {
      sessionStorage.setItem("ExaInfo", JSON.stringify(row));
      this.getList();
      this.modityShow = true;
    },
    // 返回
    goBack() {
      this.$router.push("/enMyOrder");
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.pageNum = 1;
      this.getOrderInfo();
    },
    // 分页器
    handleCurrentChange(val) {
      this.pageNum = val;
      this.getOrderInfo();
    },
  },
};
</script>

<style lang="less" scoped>
.basics {
  position: relative;
  font-size: 14px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #2b2b2b;
  padding-left: 24px;
  margin-top: 12px;
}
.basics::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 1px;
  width: 3px;
  height: 14px;
  background: #1267fa;
}
.header {
  width: 100%;
  height: 69px;
  display: flex;
  border-bottom: 1px solid #ececec;
  align-items: center;
  .orderDetails {
    margin: auto;
  }
}
.el-form {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  .el-form-item {
    width: 30%;
    margin-bottom: 5px !important;
  }
}
.el-pagination {
  margin-top: 24px;
  /deep/ .el-pagination__total {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    margin-right: 25px;
  }
  /deep/ .btn-prev {
    width: 80px;
    height: 40px;
    text-align: center;
  }
  /deep/ .btn-next {
    width: 80px;
    height: 40px;
    text-align: center;
  }
  /deep/ .number {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
  }
  /deep/ .el-input__inner {
    // width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
  }
  /deep/ .more {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
  }
  /deep/ .el-pagination__jump {
    .el-input__inner {
      width: 40px;
      height: 40px;
    }
  }
}
.modify {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #1267fa;
  cursor: pointer;
}
.chioose-header {
  display: flex;
  justify-content: space-between;
  .header-right {
    display: flex;
    /deep/ .el-input__inner {
      width: 266px;
    }
  }
}
</style>